<template name="crear">
    <script type="text/javascript" src="/js/jquery.timepicker.js"></script>
    <h2>Crear nuevo viaje</h2>
    <form method="post" action="{{link_crear}}">
        <table style="width: 500px;">
            <tr>
                <th>
                    <span>*</span>
                    Nombre del viaje
                </th>
                <td>
                    <input type="text" name="viaje[nombre]" style="width: 100%" value="{{['viaje']['nombre']}}" />
                </td>
            </tr>
            <tr>
                <th>
                    <span>*</span>
                    Fecha y Horario de salida
                </th>
                <td>
                    <input type="text" name="viaje[salida]" style="width: 100%" value="{{['viaje']['salida']}}" id="fecha_salida" />
                    <div id="fecha_llegada"></div>
                </td>
            </tr>
            <tr>
                <th>
                    <span>*</span>
                    Vehiculo (**)
                </th>
                <td>
                    <select name="viaje[fkvehiculo]" style="width: 100%" id="vehiculos" onchange="mostrarGrupos();">
                        <option value="">Elegir veh&iacute;culo</option>
                        <template name="vehiculo">
                        <option value="{{idvehiculo}}" {{selected}}>{{numero_vehiculo}} - {{nombre}} ({{patente}})</option>
                        </template>
                    </select>
                </td>
            </tr>
            <tr>
                <th>
                    <span>*</span>
                    Grupo
                </th>
                <td>
                    <select name="viaje[fkgrupo]" style="width: 100%" id="grupos">
                    </select>
                </td>
            </tr>
            <tr>
                <th>
                    <span>*</span>
                    Conductor
                </th>
                <td>
                    <select name="viaje[fkconductor]" style="width: 100%">
                        <option value="">Elegir conductor</option>
                        <template name="conductor">
                        <option value="{{idconductor}}" {{selected}}>{{nombre}} {{apellido}}</option>
                        </template>
                    </select>
                </td>
            </tr>
            <tr>
                <th>
                    <span>*</span>
                    Ruta
                </th>
                <td>
                    <select name="viaje[fkruta]" style="width: 100%" id="fkruta">
                        <option value="">Elegir ruta</option>
                        <template name="ruta">
                        <option value="{{idruta}}" {{selected}}>{{nombre_ruta}}</option>
                        </template>
                    </select>
                </td>
            </tr>
        </table>
        <br/>
        <small><strong>(**) Solo aquellos veh&iacute;culos asociados a un grupo podr&aacute;n ser utilizados para crear un viaje</strong></small>
        <br/>
        <br/>
        <input type="submit" value="Guardar viaje" class="make_submit_button" />
        <br/>
        <br/>
        <span class="requerido">*</span><span>Campos requeridos</span>
    </form>
    <script type="text/javascript">
        var grupos = {};
        var vehiculosPorGrupo = {};
        <template name="grupo">
        grupos[{{idgrupo}}] = '{{nombre}}';
        </template>
        <template name="vehiculo_por_grupo">
        if (vehiculosPorGrupo[{{fkvehiculo}}] == undefined)
        {
            vehiculosPorGrupo[{{fkvehiculo}}] = Array();
        }
        vehiculosPorGrupo[{{fkvehiculo}}].push({{fkgrupo}});
        </template>

        function mostrarGrupos()
        {
            var idVehiculo = $('#vehiculos').val();
            var opcionesHtml = '<option value="">Elegir grupo</option>'
            if (idVehiculo != '')
            {
                if (vehiculosPorGrupo[idVehiculo] != undefined)
                {
                    for (i in vehiculosPorGrupo[idVehiculo])
                    {
                        if (grupos[vehiculosPorGrupo[idVehiculo][i]] != undefined)
                        {
                            opcionesHtml += '<option value="'+vehiculosPorGrupo[idVehiculo][i]+'">'+grupos[vehiculosPorGrupo[idVehiculo][i]]+'</option>';
                        }
                    }
                }
            }
            $('#grupos').html(opcionesHtml);
        }

        mostrarGrupos();

        var fkGrupo = 1*('{{['viaje']['fkgrupo']}}');

        if (!isNaN(fkGrupo) && (fkGrupo > 0))
        {
            $('#grupos').val(fkGrupo);
        }

        $(function(){
            $('#fecha_salida').datetimepicker({
                minDate : 0,
                changeMonth: true,
                changeYear: true,
                onClose : function(date, ui)
                {
                    consultarHorarioDeLlegada();
                }
            });
            $('#fkruta').bind('change', function(){ consultarHorarioDeLlegada(); })

        });

        function consultarHorarioDeLlegada()
        {
            var url    = '{{link_horario_llegada}}';
            var salida = $('#fecha_salida').val();
            var fkruta = $('#fkruta').val();
            if (salida != '' && fkruta != '')
            {
                $('#fecha_llegada').html('<small>Calculando fecha de arribo...</small>');
                $.getJSON(url, { 'fkruta': fkruta, 'salida':salida, 'single':1 } )
                    .done(function(data)
                    {
                        if (data['llegada'] != undefined)
                        {
                            $('#fecha_llegada').html('<small><strong>Arribo aprox:</strong> '+data['llegada']+'</small>').effect('pulsate')
                        }
                        else
                        {
                            notice('Error estimando horario de llegada');
                            $('#fecha_llegada').html('');
                        }
                    })
                    .fail(function( jqxhr, textStatus, error )
                    {
                        notice('Error estimando horario de llegada');
                        $('#fecha_llegada').html('');
                    });
            }
            else
            {
                $('#fecha_llegada').html('');
            }
        }


    </script>
</template>